<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    :row-selection="rowSelection"
    :expanded-row-keys.sync="expandedRowKeys"
    @change="handleTableChange"
  >
    <span slot="action" slot-scope="text, record">
      <template>
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleEdit(record)">菜单</a>
        <a-divider type="vertical" />
        <a @click="handleDel(record)">删除</a>
      </template>
    </span>
  </a-table>
</template>
<script>

import request from '@/utils/request'

const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '类型',
    dataIndex: 'type',
    sorter: true
  },
  {
    title: '描述',
    dataIndex: 'desc',
    sorter: true
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt'
  },
  {
    title: '更新人',
    dataIndex: 'updatedBy'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]
const qs = require('qs')
const queryData = params => {
  return request({
    url: '/alpha-common/organizations',
    method: 'get',
    params: params,
    paramsSerializer: params => {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    }
  })
}

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default {
  data () {
    return {
      data: [],
      pagination: {},
      loading: false,
      columns,
      rowSelection,
      expandedRowKeys: []
    }
  },
  mounted () {
    this.fetch()
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      console.log(pagination)
      const pager = { ...this.pagination }
      this.current = pagination.current
      this.pagination = pager
      this.fetch({
        size: pagination.pageSize,
        current: pagination.current,
        orders: (sorter && sorter.order) ? (sorter.order === 'ascend') ? sorter.field : '-' + sorter.field : null,
        // sortOrder: sorter.order,
        ...filters
      })
    },
    fetch (params = {}) {
      this.loading = true
      queryData({
        ...params
      }).then(({ data }) => {
        console.log(data)
        const treeData = []
        this.listToTree(data.records, treeData, '0')
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.loading = false
        this.data = treeData
        this.pagination = pagination
      })
    },
    listToTree (list, tree, parentId) {
      list.forEach(item => {
        // 判断是否为父级菜单
        if (item.parentId === parentId) {
          const child = {
            ...item,
            key: item.key || item.code,
            redirect: '',
            children: []
          }
          // 迭代 list， 找到当前菜单相符合的所有子菜单
          this.listToTree(list, child.children, item.id)
          // 删掉不存在 children 值的属性
          if (child.children.length <= 0) {
            delete child.children
            delete child.redirect
          } else {
            child.redirect = child.children[0].path
            console.log(child)
          }
          // 加入到树中
          tree.push(child)
        }
      })
    }
  }
}
</script>
